<template>
  <div class="about">
    <h3>这是一个About关于我们组件</h3>
    <!-- 使用之前的访问方式依然有效 -->
    <p>使用store中的数据:{{ $store.state.count }}</p>
    <!-- 还可以使用下面的方式 -->
    <p>
      另一种使用数据的方式:{{ store.state.count }}==这个数是:{{
        store.getters.evenOrOdd
      }}
    </p>
    <button @click="toAbout">编程式导航跳转到news</button>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
// import {useStore} from 'vuex'
// function toAbout(){
// this不能使用 因此如下代码的编程式导航是会报错的
//   this.$router.push('/news')
// }
// 创建路由器对象
const router = useRouter();
const store = useStore(); // 创建一个store对象
console.log("ss", store);
const toAbout = () => {
  router.push("/news");
};

// const updateCount=()=>{
//   // mutations中的方法，应该使用commit的方式来触发
//   // store.commit('changeCount')

//   // 触发actions中的异步方法
//   store.dispatch('changeCount')
// }
</script>

<style>
.about {
  width: 500px;
  height: 300px;
  background-color: cyan;
}
</style>